<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap-3.3.7.css" />
    <!-- 需要用到Jquery吗？？？ 在 vue 里面尽量不要使用 Jquery -->
  </head>

  <body>
    <div id="app">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
      </div>

      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id" />
        </label>

        <label>
          Name:
          <input type="text" class="form-control" v-model="name" />
        </label>

        <!-- 在Vue中使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
        <input
          type="button"
          value="添加"
          class="btn btn-primary"
          @click="add()"
        />

        <label>
          搜索名称关键字:
          <input type="text" class="form-control" v-model="keywords" />
        </label>
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>

        <tbody>
          <!-- 之前，v-for 中的数据，都是直接从 data 上的 list 中直接渲染过来的 -->
          <!-- 现在，我们自定义了一个 search 方法，同时，把搜索的关键字，通过传参的形式，传递给了
                search方法 -->
          <!-- 在 search 方法内部，通过 执行 for 循环，把所有符合 搜索关键字的数据，保存到 一个新数组中，返回，之后再v-for循环就是符合条件的数据 -->
          <!-- 这是一个指令 指令内部可以访问到data上任何数据 -->
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td v-text="item.name"></td>
            <td v-text="item.ctime"></td>
            <td>
              <!-- 当前a链接属于 tr 标签的for 循环内部 能访问到item -->
              <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script type="text/javascript">
      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          // data(MVVM中Model数据层)中保存控制区域数据  相当于art-template模版引擎中模版数据对象 template('模版字符串', { 模版数据对象 })
          id: "",
          name: "",
          keywords: "",
          list: [
            { id: 1, name: "奔驰", ctime: new Date() },
            { id: 2, name: "宝马", ctime: new Date() }
          ]
        },
        // methods 里面方法可以认为是node里面的controller业务逻辑层  写的是业务逻辑
        methods: {
          add() {
            // 添加的方法
            // console.log('ok');
            // 分析：
            // 1.获取到 id 和 name，直接从data上面获取
            // 2.组织出一个对象
            // 3.把这个对象，调用 数组的 相关方法，添加到 当前 data 上的list中
            // 4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue(vm调度者)会默认监听到数据的改动，自动把最新的数据，应用到页面上；
            // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，
            //我们更多的是在进行 VM中 Model 数据的操作，
            // 同时，在操作Model数据的时候，执行的业务逻辑操作；

            var car = { id: this.id, name: this.name, ctime: new Date() };
            this.list.push(car);
            this.id = this.name = "";
          },
          search(keywords) {
            //根据关键字，进行数据搜索
            /*var newList = [];
                    this.list.forEach((item)=>{
                        if( item.name.indexOf(keywords) != -1){
                            newList.push(item);
                        }
                    });
                    return newList;*/

            // 注意： forEach(纯遍历完为止) some filter findIndex find这些都属于数组的新方法，
            // 都会对数组中的每一项，进行遍历，执行相关的操作;
            return this.list.filter(item => {
              // if (item.name.indexOf(keywords) != -1)

              // 注意：ES6中 ，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
              // 如果包含，则返回 true, 否则返回 false
              // jquery也有个contain方法
              if (item.name.includes(keywords)) {
                return item;
              }
            });

            // return newList;
          },
          del(id) {
            // 分析：
            // 1.如何根据Id,找到要删除这一项的索引
            // 2.如果找到索引了，直接调用 数组的 splice 方法

            /*this.list.some((item, i)=>{
                        if( item.id == id ){
                            this.list.splice(i ,1);   // 这里是用了箭头函数 this指向 与外面一致 new Vue实例
                            // 在数组的 some 方法中 ，如果 return true, 就会立即终止这个数组的后续循环
                            return true;
                        }
                    });
                    
                    
                    this.list.some(function(item){
                        if (item.id == id) {
                            console.log(this) // 指向 window对象
                            return 1;
                        }
                    })
                    */

            var index = this.list.findIndex(item => {
              if (item.id == id) {
                return true;
              }
            });

            // console.log(index);
            this.list.splice(index, 1);
          }
        }
      });
    </script>
  </body>
</html>
